<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云平台管理系统</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body data-role="{{ user.role }}" data-is-staff="{{ user.is_staff }}">
    <div class="layout-container">
        <!-- 顶部导航栏 -->
        <header class="top-header">
            <div class="header-left">
                <h1 class="project-name">云平台管理系统</h1>
            </div>
            <div class="header-right">
                <div class="user-menu">
                    <!-- 修改：按钮添加 type 和 ARIA 属性 -->
                    <button class="user-btn" id="userMenuBtn" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="userDropdown" aria-label="用户菜单">
                        <!-- 修改：移除 svg 的 alt，新增 aria-hidden -->
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" aria-hidden="true" class="svg-icon headerPersonalBlock__isLogin__zviqO"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm0 1c6.07 0 11 4.93 11 11 0 2.64-.93 5.06-2.49 6.95l-2.52-2.52.7-3.98v-.1c-.48-1.44-2.1-6.2-2.78-6.85a18.36 18.36 0 00-3.7-1.87L12 3.56l-.17.07c-1.3.48-2.54 1.11-3.7 1.87-.69.65-2.89 5.85-3.32 6.88l-.06.14 1.23 3.94-2.5 2.5a10.97 10.97 0 01-2.49-6.95C1 5.93 5.93 1 12 1zm-1.11 21.94v-4.36l-2.87-1.72-.44.74 2.45 1.45v3.74c-.09 0-.18-.03-.27-.04-1.99-.42-3.77-1.38-5.21-2.71-.15-.16-.3-.32-.44-.49l2.8-3.12-1.22-4.12c.84-2.22 1.83-4.37 2.97-6.45.97-.65 2.01-1.19 3.11-1.61v6.1l3.33-.87c.63.85 1.17 1.77 1.6 2.73l-1.59 4.42-2.48 1.69v4.63c-.2.01-.41.03-.61.03-.38 0-.75-.02-1.11-.06l-.02.02z" fill="#fff"></path></svg>
                    </button>
                    <!-- 修改：下拉菜单增加角色与可访问性属性 -->
                    <div class="dropdown-menu" id="userDropdown" role="menu" aria-labelledby="userMenuBtn" aria-hidden="true">
                        <a href="{% url 'profile' %}" class="dropdown-item" data-page="profile" role="menuitem">
                            <i class="fas fa-user-cog"></i>
                            账号管理
                        </a>
                        <a href="javascript:void(0)" class="dropdown-item" role="menuitem">
                            <i class="fas fa-sync-alt"></i>
                            切换角色
                        </a>
                        <a href="{% url 'logout' %}" class="dropdown-item" role="menuitem">
                            <i class="fas fa-sign-out-alt"></i>
                            退出账号
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <div class="main-container">
            <!-- 左侧导航栏 -->
            <!-- 修改：侧边栏增加可访问性标签 -->
            <nav class="sidebar" aria-label="侧边栏导航">
                <!-- 用户信息区域 -->
                <div class="user-profile">
                    <div class="avatar">
                        <!-- 修改：移除空 class，增加角色与说明 -->
                        <i id="sidebar-avatar-icon" role="img" aria-label="用户头像"
                           style="{% if user.avatar %}background-image:url('{{ user.avatar.url }}');{% else %}background-image:url('{% static 'img/default-avatar.svg' %}');{% endif %}"></i>
                    </div>
                    <div class="user-info">
                        <div class="user-name">{{ user.username|default:"用户名" }}</div>
                    </div>
                </div>
                
                <!-- 分隔线 -->
                <div class="divider"></div>
                
                <ul class="nav-menu">
                    <li class="nav-item active">
                        <!-- 修改：避免 # 导航跳转，并标注当前页 -->
                        <a href="javascript:void(0)" class="nav-link" data-page="home" aria-current="page">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" data-page="ai-access">
                            <i class="fas fa-robot"></i>
                            <span>AI接入</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" data-page="visualization">
                            <i class="fas fa-chart-bar"></i>
                            <span>可视化应用</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" data-page="inspection">
                            <i class="fas fa-search"></i>
                            <span>巡检管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" data-page="notifications">
                            <i class="fas fa-bell"></i>
                            <span>订阅通知</span>
                        </a>
                    </li>
                    {% if user.is_staff or user.role == 'super_admin' or user.role == 'admin' %}
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" data-page="users">
                            <i class="fas fa-users"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    {% endif %}
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" data-page="files">
                            <i class="fas fa-folder"></i>
                            <span>文件管理</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧内容区 -->
            <!-- 修改：主内容区增加语义角色与标签 -->
            <main class="content-area" role="main" aria-label="内容区">
                <div class="content-wrapper" id="contentWrapper">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
            </main>
        </div>
    </div>

    <!-- 修改：脚本延迟加载以避免阻塞渲染 -->
    <script src="{% static 'js/app.js' %}" defer></script>
</body>
</html>